<template>
  <view class="detail-container">
    <!-- 顶部导航 -->
    <view class="top-nav">
      <view class="nav-back" @click="goBack">
        <text class="icon">&#xf060;</text>
      </view>
      <text class="nav-title">视频详情</text>
      <view class="nav-more" @click="showActions = true">
        <text class="icon">&#xf142;</text>
      </view>
    </view>

    <!-- 视频播放器 -->
    <view class="video-section">
      <!-- 生成中状态 -->
      <view
        v-if="taskInfo && taskInfo.status === 'ON_QUEUE'"
        class="video-generating"
      >
        <view class="generating-content">
          <text class="gen-icon spinning">&#xf110;</text>
          <text class="gen-title">AI 正在创作中...</text>
          <text class="gen-desc">预计还需 {{ estimatedTime }} 秒</text>
          <view class="gen-progress">
            <view
              class="progress-bar"
              :style="{ width: progress + '%' }"
            ></view>
          </view>
          <text class="gen-time">已用时 {{ usedTime }} 秒</text>
        </view>
      </view>

      <!-- 成功状态 -->
      <view
        v-else-if="taskInfo && taskInfo.status === 'SUCCESS'"
        class="video-player"
      >
        <video
          :src="taskInfo.videoUrl"
          controls
          :show-center-play-btn="true"
          :show-fullscreen-btn="true"
          :enable-progress-gesture="true"
          class="video-element"
          @error="onVideoError"
        />
      </view>

      <!-- 失败状态 -->
      <view
        v-else-if="taskInfo && taskInfo.status === 'FAILED'"
        class="video-failed"
      >
        <text class="failed-icon">&#xf119;</text>
        <text class="failed-title">生成失败</text>
        <text class="failed-desc">{{
          taskInfo.errorMessage || "请稍后重试"
        }}</text>
        <button class="retry-btn" @click="retryGenerate">
          <text class="icon">&#xf021;</text>
          <text>重新生成</text>
        </button>
      </view>
    </view>

    <!-- 详情信息 -->
    <scroll-view scroll-y class="detail-content">
      <!-- Prompt -->
      <view class="info-card">
        <view class="card-header">
          <text class="icon">&#xf040;</text>
          <text class="card-title">描述内容</text>
        </view>
        <text class="prompt-text">{{ taskInfo ? taskInfo.prompt : "" }}</text>
      </view>

      <!-- 参考图片 -->
      <view
        v-if="
          taskInfo && taskInfo.referImages && taskInfo.referImages.length > 0
        "
        class="info-card"
      >
        <view class="card-header">
          <text class="icon">&#xf03e;</text>
          <text class="card-title">参考图片</text>
        </view>
        <scroll-view scroll-x class="refer-images">
          <image
            v-for="(img, index) in taskInfo.referImages"
            :key="index"
            :src="img"
            mode="aspectFill"
            class="refer-image"
            @click="previewImage(img)"
          />
        </scroll-view>
      </view>

      <!-- 基本信息 -->
      <view class="info-card">
        <view class="card-header">
          <text class="icon">&#xf05a;</text>
          <text class="card-title">基本信息</text>
        </view>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">任务ID</text>
            <text class="info-value">{{
              taskInfo ? taskInfo.jobId : "-"
            }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">状态</text>
            <view
              class="status-badge"
              :class="taskInfo ? taskInfo.status.toLowerCase() : ''"
            >
              <text>{{ formatStatus(taskInfo ? taskInfo.status : "") }}</text>
            </view>
          </view>
          <view class="info-item">
            <text class="info-label">模型</text>
            <text class="info-value">{{
              taskInfo ? taskInfo.model : "-"
            }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">消耗积分</text>
            <text class="info-value">{{
              taskInfo && taskInfo.quota ? taskInfo.quota : "-"
            }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">创建时间</text>
            <text class="info-value">{{
              formatTime(taskInfo ? taskInfo._add_time : 0)
            }}</text>
          </view>
          <view v-if="taskInfo && taskInfo.finishTime" class="info-item">
            <text class="info-label">完成时间</text>
            <text class="info-value">{{
              formatFinishTime(taskInfo.finishTime)
            }}</text>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button
          v-if="taskInfo && taskInfo.status === 'SUCCESS'"
          class="action-btn primary"
          @click="saveToAlbum"
        >
          <text class="icon">&#xf0c7;</text>
          <text>保存到相册</text>
        </button>
        <button
          v-if="taskInfo && taskInfo.status === 'SUCCESS'"
          class="action-btn secondary"
          @click="downloadVideo"
        >
          <text class="icon">&#xf019;</text>
          <text>下载</text>
        </button>
        <button
          v-if="taskInfo && taskInfo.status === 'SUCCESS'"
          class="action-btn info"
          @click="shareVideo"
        >
          <text class="icon">&#xf1e0;</text>
          <text>分享</text>
        </button>
        <button
          v-if="taskInfo && taskInfo.status === 'ON_QUEUE'"
          class="action-btn warning"
          @click="refreshStatus"
        >
          <text class="icon">&#xf021;</text>
          <text>刷新状态</text>
        </button>
      </view>
    </scroll-view>

    <!-- 操作菜单 -->
    <view v-if="showActions" class="action-modal" @click="showActions = false">
      <view class="modal-menu" @click.stop>
        <view class="menu-item" @click="copyJobId">
          <text class="icon">&#xf0c5;</text>
          <text>复制任务ID</text>
        </view>
        <view class="menu-item" @click="reCreate">
          <text class="icon">&#xf021;</text>
          <text>基于此重新创作</text>
        </view>
        <view class="menu-item delete" @click="confirmDelete">
          <text class="icon">&#xf1f8;</text>
          <text>删除</text>
        </view>
        <view class="menu-cancel" @click="showActions = false">
          <text>取消</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      jobId: "",
      taskInfo: null,
      showActions: false,
      pollingTimer: null,
      startTime: null,
      usedTime: 0,
      estimatedTime: 60,
      progress: 0,
    };
  },
  onLoad(options) {
    if (options.jobId) {
      this.jobId = options.jobId;
      this.loadDetail();
    }
  },
  onUnload() {
    this.stopPolling();
  },
  methods: {
    // 加载详情
    async loadDetail() {
      try {
        const res = await vk.callFunction({
          url: "client/sora/kh/getTaskDetail",
          data: {
            jobId: this.jobId,
          },
        });

        if (res.code === 0 && res.data) {
          this.taskInfo = res.data;

          // 如果是生成中状态，开始轮询
          if (this.taskInfo.status === "ON_QUEUE") {
            this.startPolling();
          }
        } else {
          uni.showToast({
            title: res.msg || "加载失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("加载详情失败:", error);
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      }
    },

    // 开始轮询
    startPolling() {
      if (this.pollingTimer) return;

      this.startTime = Date.now();

      // 每秒更新进度
      this.pollingTimer = setInterval(() => {
        this.usedTime = Math.floor((Date.now() - this.startTime) / 1000);
        this.progress = Math.min(90, (this.usedTime / 120) * 100);
        this.estimatedTime = Math.max(0, 120 - this.usedTime);
      }, 1000);

      // 每5秒查询一次状态
      this.statusTimer = setInterval(async () => {
        await this.checkStatus();
      }, 5000);
    },

    // 停止轮询
    stopPolling() {
      if (this.pollingTimer) {
        clearInterval(this.pollingTimer);
        this.pollingTimer = null;
      }
      if (this.statusTimer) {
        clearInterval(this.statusTimer);
        this.statusTimer = null;
      }
    },

    // 检查状态
    async checkStatus() {
      try {
        const res = await vk.callFunction({
          url: "client/sora/kh/pollTask",
          data: {
            jobId: this.jobId,
          },
        });

        if (res.code === 0) {
          this.taskInfo = res.data;

          if (res.status === "SUCCESS") {
            this.stopPolling();
            this.progress = 100;
            uni.showToast({
              title: "视频生成成功",
              icon: "success",
            });
          } else if (res.status === "FAILED") {
            this.stopPolling();
            uni.showToast({
              title: "视频生成失败",
              icon: "none",
            });
          }
        }
      } catch (error) {
        console.error("查询状态失败:", error);
      }
    },

    // 刷新状态
    async refreshStatus() {
      uni.showLoading({ title: "刷新中..." });
      await this.checkStatus();
      uni.hideLoading();
    },

    // 重试生成
    retryGenerate() {
      uni.showModal({
        title: "重新生成",
        content: "确定要重新生成这个视频吗？",
        success: async (res) => {
          if (res.confirm) {
            uni.showLoading({ title: "创建中..." });
            try {
              const result = await vk.callFunction({
                url: "client/sora/pub/generations",
                data: {
                  model: this.taskInfo.model,
                  prompt: this.taskInfo.prompt,
                  referImages: this.taskInfo.referImages,
                },
              });

              if (result.code === 0) {
                uni.hideLoading();
                uni.showToast({
                  title: "任务创建成功",
                  icon: "success",
                });

                // 更新jobId并重新加载
                this.jobId = result.jobId;
                setTimeout(() => {
                  this.loadDetail();
                }, 1000);
              }
            } catch (error) {
              console.error("重新生成失败:", error);
              uni.hideLoading();
            }
          }
        },
      });
    },

    // 下载视频
    // 保存到相册
    saveToAlbum() {
      if (!this.taskInfo || !this.taskInfo.videoUrl) {
        uni.showToast({
          title: "视频地址不存在",
          icon: "none",
        });
        return;
      }

      // #ifdef APP-PLUS || MP-WEIXIN
      // 先检查权限
      uni.getSetting({
        success: (res) => {
          if (res.authSetting["scope.writePhotosAlbum"] === false) {
            // 用户之前拒绝过权限，需要引导用户打开设置
            uni.showModal({
              title: "需要相册权限",
              content: "请在设置中允许访问相册",
              confirmText: "去设置",
              success: (modalRes) => {
                if (modalRes.confirm) {
                  uni.openSetting();
                }
              },
            });
            return;
          }

          // 执行保存
          this.performSaveToAlbum();
        },
        fail: () => {
          // 如果获取设置失败，直接尝试保存
          this.performSaveToAlbum();
        },
      });
      // #endif

      // #ifdef H5
      // H5 环境直接下载
      this.downloadVideo();
      // #endif
    },

    // 执行保存到相册操作
    performSaveToAlbum() {
      uni.showLoading({ title: "保存中..." });

      uni.downloadFile({
        url: this.taskInfo.videoUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            // 保存到相册
            uni.saveVideoToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.hideLoading();
                uni.showToast({
                  title: "已保存到相册",
                  icon: "success",
                  duration: 2000,
                });
              },
              fail: (err) => {
                console.error("保存到相册失败:", err);
                uni.hideLoading();

                // 根据错误类型给出不同提示
                if (err.errMsg && err.errMsg.indexOf("auth") !== -1) {
                  uni.showModal({
                    title: "需要相册权限",
                    content: "请在设置中允许访问相册",
                    confirmText: "去设置",
                    success: (modalRes) => {
                      if (modalRes.confirm) {
                        uni.openSetting();
                      }
                    },
                  });
                } else {
                  uni.showToast({
                    title: "保存失败，请重试",
                    icon: "none",
                  });
                }
              },
            });
          } else {
            uni.hideLoading();
            uni.showToast({
              title: "下载失败",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.error("下载失败:", err);
          uni.hideLoading();
          uni.showToast({
            title: "下载失败，请检查网络",
            icon: "none",
          });
        },
      });
    },

    // 下载视频（H5/保存到本地）
    downloadVideo() {
      if (!this.taskInfo || !this.taskInfo.videoUrl) {
        uni.showToast({
          title: "视频地址不存在",
          icon: "none",
        });
        return;
      }

      // #ifdef H5
      // H5 使用 a 标签下载
      const a = document.createElement("a");
      a.href = this.taskInfo.videoUrl;
      a.download = `sora_video_${this.taskInfo.jobId}.mp4`;
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);

      uni.showToast({
        title: "开始下载",
        icon: "success",
      });
      // #endif

      // #ifdef APP-PLUS
      // APP 使用 plus.downloader
      uni.showLoading({ title: "下载中..." });

      const downloadTask = uni.downloadFile({
        url: this.taskInfo.videoUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            // #ifdef APP-PLUS
            // 保存到本地文件系统
            const fileName = `sora_video_${this.taskInfo.jobId}.mp4`;
            const filePath = `_doc/${fileName}`;

            plus.io.resolveLocalFileSystemURL(
              res.tempFilePath,
              (entry) => {
                plus.io.resolveLocalFileSystemURL(
                  "_doc/",
                  (dirEntry) => {
                    entry.copyTo(
                      dirEntry,
                      fileName,
                      () => {
                        uni.hideLoading();
                        uni.showModal({
                          title: "下载成功",
                          content: `视频已保存到：文档/${fileName}`,
                          confirmText: "查看",
                          cancelText: "确定",
                          success: (modalRes) => {
                            if (modalRes.confirm) {
                              // 打开文件所在目录
                              plus.runtime.openFile(filePath);
                            }
                          },
                        });
                      },
                      () => {
                        uni.hideLoading();
                        uni.showToast({
                          title: "保存失败",
                          icon: "none",
                        });
                      }
                    );
                  },
                  () => {
                    uni.hideLoading();
                    uni.showToast({
                      title: "保存失败",
                      icon: "none",
                    });
                  }
                );
              },
              () => {
                uni.hideLoading();
                uni.showToast({
                  title: "保存失败",
                  icon: "none",
                });
              }
            );
            // #endif
          } else {
            uni.hideLoading();
            uni.showToast({
              title: "下载失败",
              icon: "none",
            });
          }
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({
            title: "下载失败",
            icon: "none",
          });
        },
      });

      // 监听下载进度
      downloadTask.onProgressUpdate((res) => {
        console.log("下载进度", res.progress);
        uni.showLoading({ title: `下载中 ${res.progress}%` });
      });
      // #endif

      // #ifdef MP-WEIXIN
      // 小程序保存到相册
      this.saveToAlbum();
      // #endif
    },

    // 分享视频
    shareVideo() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 5,
        videoPath: this.taskInfo.videoUrl,
        success: () => {
          uni.showToast({
            title: "分享成功",
            icon: "success",
          });
        },
        fail: (err) => {
          console.error("分享失败:", err);
          uni.showToast({
            title: "分享失败",
            icon: "none",
          });
        },
      });
    },

    // 复制任务ID
    copyJobId() {
      uni.setClipboardData({
        data: this.jobId,
        success: () => {
          uni.showToast({
            title: "已复制",
            icon: "success",
          });
          this.showActions = false;
        },
      });
    },

    // 基于此重新创作
    reCreate() {
      this.showActions = false;
      uni.navigateTo({
        url: `/pages/sora/index?prompt=${encodeURIComponent(
          this.taskInfo.prompt
        )}`,
      });
    },

    // 确认删除
    confirmDelete() {
      this.showActions = false;
      uni.showModal({
        title: "确认删除",
        content: "删除后无法恢复，确定要删除吗？",
        success: async (res) => {
          if (res.confirm) {
            await this.deleteTask();
          }
        },
      });
    },

    // 删除任务
    async deleteTask() {
      try {
        const res = await vk.callFunction({
          url: "client/sora/kh/deleteTask",
          data: {
            jobId: this.jobId,
          },
        });

        if (res.code === 0) {
          uni.showToast({
            title: "删除成功",
            icon: "success",
          });

          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        }
      } catch (error) {
        console.error("删除失败:", error);
        uni.showToast({
          title: "删除失败",
          icon: "none",
        });
      }
    },

    // 预览图片
    previewImage(url) {
      uni.previewImage({
        urls: this.taskInfo.referImages,
        current: url,
      });
    },

    // 视频错误
    onVideoError(e) {
      console.error("视频播放错误:", e);
      uni.showToast({
        title: "视频加载失败",
        icon: "none",
      });
    },

    // 返回
    goBack() {
      uni.navigateBack();
    },

    // 格式化状态
    formatStatus(status) {
      const map = {
        ON_QUEUE: "生成中",
        SUCCESS: "已完成",
        FAILED: "失败",
      };
      return map[status] || status;
    },

    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp);
      const Y = date.getFullYear();
      const M = (date.getMonth() + 1).toString().padStart(2, "0");
      const D = date.getDate().toString().padStart(2, "0");
      const h = date.getHours().toString().padStart(2, "0");
      const m = date.getMinutes().toString().padStart(2, "0");
      const s = date.getSeconds().toString().padStart(2, "0");
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    },

    // 格式化完成时间
    formatFinishTime(timeStr) {
      if (!timeStr) return "-";
      // Sora API 返回的时间已经是北京时间，直接显示即可
      return timeStr;
    },
  },
};
</script>

<style scoped>
page {
  background: #0a0a0a;
}

.detail-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
}

/* 顶部导航 */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  padding-top: calc(30rpx + constant(safe-area-inset-top));
  padding-top: calc(30rpx + env(safe-area-inset-top));
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20rpx);
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);
  z-index: 999;
}

.nav-back,
.nav-more {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.1);
  border: 1rpx solid rgba(139, 92, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  font-family: FontAwesome;
  font-size: 32rpx;
  color: #8b5cf6;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

/* 视频区域 */
.video-section {
  width: 100%;
  height: 500rpx;
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: calc(130rpx + constant(safe-area-inset-top));
  margin-top: calc(130rpx + env(safe-area-inset-top));
  margin-left: auto;
  margin-right: auto;
}

/* 适配不同屏幕 */
@media (min-width: 750px) {
  .video-section {
    max-width: 750rpx;
    height: 600rpx;
  }
}

.video-generating {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(236, 72, 153, 0.1) 100%
  );
}

.generating-content {
  text-align: center;
  padding: 60rpx;
}

.gen-icon {
  display: block;
  font-family: FontAwesome;
  font-size: 120rpx;
  color: #8b5cf6;
  margin-bottom: 40rpx;
}

.gen-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20rpx;
}

.gen-desc {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 40rpx;
}

.gen-progress {
  width: 400rpx;
  height: 8rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10rpx;
  overflow: hidden;
  margin: 0 auto 20rpx;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);
  transition: width 0.3s;
}

.gen-time {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.4);
}

.video-player {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-failed {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.1);
}

.failed-icon {
  font-family: FontAwesome;
  font-size: 120rpx;
  color: #ef4444;
  margin-bottom: 30rpx;
}

.failed-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20rpx;
}

.failed-desc {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 40rpx;
}

.retry-btn {
  padding: 20rpx 60rpx;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
  border: none;
}

.retry-btn .icon {
  font-size: 28rpx;
  color: #fff;
}

/* 详情内容 */
.detail-content {
  flex: 1;
  overflow-y: auto;
  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
}

.info-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 30rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

.card-header .icon {
  margin-right: 16rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
}

.prompt-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
}

/* 参考图片 */
.refer-images {
  white-space: nowrap;
}

.refer-image {
  display: inline-block;
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
  margin-right: 20rpx;
}

/* 信息列表 */
.info-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-label {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.5);
}

.info-value {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
}

.status-badge {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #fff;
}

.status-badge.on_queue {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.status-badge.success {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.status-badge.failed {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 20rpx;
  padding: 20rpx 0;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
}

.action-btn.primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  color: #fff;
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #8b5cf6;
  border: 1rpx solid rgba(139, 92, 246, 0.3);
}

.action-btn.info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1rpx solid rgba(59, 130, 246, 0.3);
}

.action-btn.warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1rpx solid rgba(245, 158, 11, 0.3);
}

.action-btn .icon {
  font-size: 28rpx;
  color: inherit;
}

/* 操作菜单 */
.action-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: flex-end;
  z-index: 999;
}

.modal-menu {
  width: 100%;
  background: #1a1a2e;
  border-radius: 40rpx 40rpx 0 0;
  padding: 20rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 40rpx;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 30rpx;
  margin-bottom: 20rpx;
  font-size: 32rpx;
  color: #fff;
}

.menu-item .icon {
  font-size: 36rpx;
  color: #8b5cf6;
}

.menu-item.delete {
  color: #ef4444;
}

.menu-item.delete .icon {
  color: #ef4444;
}

.menu-cancel {
  text-align: center;
  padding: 30rpx;
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 20rpx;
}

/* 动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinning {
  animation: spin 1s linear infinite;
}
</style>
